<template>
  <div>
    <div class="box">
      <button @click="flag = true">修改</button>
      <teleport to="body">123</teleport>
      <message :show="flag" @quxiao="flag = false" @fn="flag = false">
        <h1>修改信息</h1>
        <template #content>
          <div class="green">传递信息</div>
        </template>
      </message>
       <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    </div>
  </div>
</template>
<script setup>
  import { ElButton } from 'element-plus'
import message from "../components/messagebox.vue";
import { ref } from "vue";
const flag = ref(false);
const green = ref("green");
const a = ref("40px");
</script>
 <style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: gainsboro;
}
.green {
  color: v-bind(green);
  font-size: v-bind(a);
}
</style>